<template>
  <div class="page-content">
    <a-card style="width: 100%; height: 100%">
      <div class="header">
        <Condition
          :condition="condition"
          :btns="['search', 'reset']"
          @search="searchHandle"
          @reset="reset"
        />
        <span> 共筛选出 {{ pagination.total }} 条数据 </span>
      </div>
      <div class="main">
        <a-table
          class="table"
          size="small"
          :loading="loading"
          :dataSource="List"
          :columns="columns"
          :pagination="pagination"
          @change="paginationChange"
          :sticky="{ offsetHeader: 0 }"
        >
          <template #bodyCell="{ column, text, record, index }">
            <template v-if="column.dataIndex == 'no'">
              {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
            </template>
            <template v-else-if="column.dataIndex == 'state'">
              <span style="color: #ff813c" v-if="record.state == 'TODO'">
                <ExclamationCircleFilled two-tone-color="#ff813c" />
                待处理
              </span>
              <span style="color: rgb(97, 93, 233)" v-if="record.state == 'CANCEL'">
                <ExclamationCircleFilled two-tone-color="rgb(97, 93, 233)" />
                已取消
              </span>
              <span style="color: #0cb67c" v-if="record.state == 'DONE'">
                <CheckCircleFilled two-tone-color="#0cb67c" />
                已完成
              </span>
              <!-- <a-tag
                v-if="record.state == 'DONE'"
                color="#F1FFFA"
                style="color: #0cb67c; border-color: #0cb67c"
              >
                已完成
              </a-tag> -->
              <!-- <a-tag
                v-if="record.state == 'TODO'"
                color="#FFF9F5"
                style="color: #ff813c; border-color: #ff813c"
              >
                待处理
              </a-tag>

              <a-tag
                v-if="record.state == 'CANCEL'"
                color="#FFF9F5"
                style="color: rgb(97, 93, 233); border-color: rgb(97, 93, 233)"
              >
                已取消
              </a-tag> -->
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link" @click="updateInfoHandle(record)">处理</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>
    <updateInfo ref="updateInfoRef" @close="goBack" />
  </div>
</template>
<script lang="ts" setup>
import Condition from '@/components/ConditionSearch/index.vue'
import { ref, onMounted, reactive } from 'vue'
import updateInfo from './updateInfo.vue'
import dayjs from 'dayjs'
import { getGreenWayOrderList } from '@/api/greenWayOrder/index.ts'
import { ExclamationCircleFilled, CheckCircleFilled } from '@ant-design/icons-vue'

const loading = ref<boolean>(false)
const List = ref<any[]>([])
const condition = ref([
  {
    title: '服务提交时间',
    dataIndex: 'submitTime',
    type: 'dayRange',
    value: [],
    showTime: true,
    style: { width: '340px' }
  },
  {
    title: '',
    dataIndex: 'hospitalName',
    type: 'input',
    value: '',
    placeholder: '请输入申请医院/申请医生'
  },
  {
    title: '',
    dataIndex: 'condition',
    type: 'input',
    value: '',
    placeholder: '请输入患者手机号/患者姓名',
    style: { width: '220px' }
  },
  {
    title: '',
    dataIndex: 'state',
    type: 'select',
    value: undefined,
    data: [
      {
        label: '待处理',
        value: 'TODO'
      },
      {
        label: '已取消',
        value: 'CANCEL'
      },
      {
        label: '已完成',
        value: 'DONE'
      }
    ],
    placeholder: '请选择服务状态'
  }
])
const columns = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '服务提交时间',
    dataIndex: 'submitTime',
    key: 'submitTime',
    align: 'left'
  },
  {
    title: '账号',
    dataIndex: 'userPhone',
    key: 'userPhone',
    align: 'left'
  },
  {
    title: '患者手机号',
    dataIndex: 'phone',
    key: 'phone',
    align: 'left'
  },
  {
    title: '患者姓名',
    dataIndex: 'patName',
    key: 'patName',
    align: 'left'
  },
  {
    title: '申请医院',
    dataIndex: 'hospitalName',
    key: 'hospitalName',
    align: 'left'
  },
  {
    title: '申请医生',
    dataIndex: 'doctorName',
    key: 'doctorName',
    align: 'left'
  },
  {
    title: '服务状态',
    dataIndex: 'state',
    key: 'state',
    align: 'left'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: 90
  }
])
const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}
const getDataList = () => {
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      if (v.dataIndex == 'submitTime') {
        return Object.assign(c, {
          begin: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:ss') : '',
          end: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:ss') : ''
        })
      } else {
        return Object.assign(c, { [v.dataIndex]: v.value })
      }
    } else {
      return c
    }
  }, {})
  getGreenWayOrderList({
    ...obj,
    page: pagination.value.current,
    limit: pagination.value.pageSize
  })
    .then((res) => {
      List.value = res.data.list
      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
onMounted(() => {
  loading.value = true
  getDataList()
})

const updateInfoRef = ref()
const updateInfoHandle = (data) => {
  updateInfoRef.value.init(data)
}

const searchHandle = () => {
  pagination.value.current = 1
  loading.value = true
  getDataList()
}
const reset = () => {
  pagination.value.current = 1
  pagination.value.pageSize = 10
  condition.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  loading.value = true
  getDataList()
}

const goBack = () => {
  loading.value = true
  getDataList()
}
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}

.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;
}
</style>
